<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			canvas {
				background: pink;
				margin: 0 auto;
				display: block;
			}
		</style>
	</head>

	<body>
		<canvas id="myCan" width="400" height="400">
			您的浏览器不支持canvas，请升级浏览器！
		</canvas>
		<div class="box"></div>
		<script>
			var oC = document.getElementById('myCan');
			var ctx = oC.getContext('2d');
			ctx.translate(200, 200);
			// 将表盘逆时针旋转90度，让0度在上方
			ctx.rotate(-100 * Math.PI / 180);
			

			draw();
			var timer = setInterval(function(){
				draw();
			},1000);
			function draw() {
				ctx.clearRect(-200,-200,400,400);
				ctx.beginPath();
				ctx.lineWidth = 10;
				ctx.strokeStyle = "lightgoldenrodyellow";
				ctx.arc(0, 0, 210, 0, 2 * Math.PI);
				ctx.stroke();

				var data = new Date();
				var H = data.getHours();
				var M = data.getMinutes();
				var S = data.getSeconds();

				// 时针需要走的度数
				var angleH = (H + M / 60 + S / 3600) * 30 * Math.PI / 180;
				var angleM = (M + S / 60) * 6 * Math.PI / 180;
				var angleS = S * 6 * Math.PI / 180;
				// 画线
				ctx.strokeStyle = 'lightyellow';
				ctx.lineWidth = 6;
				for (var i = 0; i < 60; i++) {
					if (i % 5 == 0) {
						ctx.rotate(6 * Math.PI / 180);
						ctx.fillRect(200, 0, -10, 8);
					} else {
						ctx.rotate(6 * Math.PI / 180);
						ctx.fillRect(200, 0, -3, 8);
					}
				}

				// 画时针
				ctx.save();
				ctx.beginPath();
				ctx.lineWidth = 10;
				ctx.rotate(angleH);
				ctx.moveTo(-10, 0);
				ctx.lineTo(50, 0);
				ctx.stroke();
				ctx.restore();
				// 画分针
				ctx.save();
				ctx.beginPath();
				ctx.lineWidth = 6;
				ctx.rotate(angleM);
				ctx.moveTo(-15, 0);
				ctx.lineTo(70, 0);
				ctx.stroke();
				ctx.restore();
				// 画秒针
				ctx.save();
				ctx.beginPath();
				ctx.lineWidth = 2;
				ctx.rotate(angleS);
				ctx.strokeStyle = 'lightyellow';
				ctx.moveTo(-20, 0);
				ctx.lineTo(90, 0);
				ctx.stroke();
				ctx.restore();
			}
		</script>
	</body>

</html>
